﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel" :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg" :commonConfig="commonConfig">
    <el-button-group>
      <el-button type="primary" round v-if="myConfig.isEnable" @click="handleEdit" icon="el-icon-edit">编辑</el-button>
      <el-button type="success" round icon="el-icon-view" @click="handleView">查看</el-button>
    </el-button-group>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="80%"
        class="pop"
        :before-close="handleShowPopClose">
      <el-form>
        <Editor-Md ref = "myMD" :disabled="!myConfig.isEnable"
            :defaultValue.sync='editData' :showMD='showPop'></Editor-Md>
         <el-form-item>
          <el-button type="primary" @click="submitSelected" v-if="myConfig.isEnable">确定</el-button>
          <el-button type="info" @click="cancelSelected" v-if="myConfig.isEnable">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPopView"
        append-to-body
        width="80%"
        class="pop"
        :before-close="handleShowPopViewClose">
        <el-form>
        <Editor-Md :disabled="true"
            :defaultValue.sync='editData' :showMD='showPopView'></Editor-Md>
          <el-form-item>
            <el-button type="info" @click="handleShowPopViewClose">关闭</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
import EditorMd from '@/components/EditorMd/EditorMd'
export default {
  components: {
    baseComponent, baseUI, EditorMd
  },
  mixins: [baseComponent],
  mounted () {
    this.init(this.config)
  },
  data () {
    return {
      showPop: false,
      showPopView: false,
      editData: ''
    }
  },
  computed: {
  },
  methods: {
    load (data) {
    },
    handleEdit () {
      this.editData = this.selectedValue
      this.showPop = true
    },
    submitSelected () {
      this.$refs.myMD.getMdValue()
      this.selectedValue = this.editData
      this.showPop = false
      this.onChange()
    },
    cancelSelected () {
      this.showPop = false
    },
    handleShowPopClose () {
      this.showPop = false
    },
    handleView () {
      this.editData = this.selectedValue
      this.showPopView = true
    },
    handleShowPopViewClose () {
      this.showPopView = false
    }
  },
  watch: {
  }
}
</script>
<style lang="scss" scoped>
.pop {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
</style>
